<template>
  <div :class="classes" @mousedown.prevent>
    <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
      <div
        :class="[prefixCls + '-shortcut']"
        v-for="shortcut in shortcuts"
        @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
    </div>
    <div :class="[prefixCls + '-body']">
      <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime&&onlyTimeRange">
        <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
          <span
            :class="iconBtnCls('prev', '-double')"
            @click="prevYear('left')"><Icon type="ios-arrow-left" /></span>
          <span
            v-if="leftPickerTable === 'date-table'"
            :class="iconBtnCls('prev')"
            @click="prevMonth('left')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-left" /></span>
          <date-panel-label
            :date-panel-label="leftDatePanelLabel"
            :current-view="leftDatePanelView"
            :date-prefix-cls="datePrefixCls" />
          <span
            v-if="splitPanels || leftPickerTable !== 'date-table'"
            :class="iconBtnCls('next', '-double')"
            @click="nextYear('left')"><Icon type="ios-arrow-right" /></span>
          <span
            v-if="splitPanels && leftPickerTable === 'date-table'"
            :class="iconBtnCls('next')"
            @click="nextMonth('left')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-right" /></span>
          <span
            v-if="splitPanels || rightPickerTable !== 'date-table'"
            :class="iconBtnCls('prev', '-double')"
            @click="prevYear('right')"><Icon type="ios-arrow-left" /></span>
          <span
            v-if="splitPanels && rightPickerTable === 'date-table'"
            :class="iconBtnCls('prev')"
            @click="prevMonth('right')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-left" /></span>

          <span
            :class="iconBtnCls('next', '-double')"
            @click="nextYear('right')"><Icon type="ios-arrow-right" /></span>
          <span
            v-if="rightPickerTable === 'date-table'"
            :class="iconBtnCls('next')"
            @click="nextMonth('right')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-right" /></span>
        </div>
        <component
          :is="leftPickerTable"
          ref="leftYearTable"
          v-if="currentView !== 'time'"
          :table-date="leftPanelDate"
          :start-date="startDate"
          selection-mode="range"
          :disabled-date="disabledDate"
          :range-state="rangeState"
          :show-week-numbers="showWeekNumbers"
          :value="preSelecting.left ? [dates[0]] : dates"
          @on-change-range="handleChangeRange"
          @on-pick="panelPickerHandlers.left"
          @on-pick-click="handlePickClick" />

      </div>
      <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime&&!onlyTimeRange">
        <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
          <span
            :class="iconBtnCls('prev', '-double')"
            @click="prevYear('left')"><Icon type="ios-arrow-left" /></span>
          <span
            v-if="leftPickerTable === 'date-table'"
            :class="iconBtnCls('prev')"
            @click="prevMonth('left')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-left" /></span>
          <date-panel-label
            :date-panel-label="leftDatePanelLabel"
            :current-view="leftDatePanelView"
            :date-prefix-cls="datePrefixCls" />
          <span
            v-if="splitPanels || leftPickerTable !== 'date-table'"
            :class="iconBtnCls('next', '-double')"
            @click="nextYear('left')"><Icon type="ios-arrow-right" /></span>
          <span
            v-if="splitPanels && leftPickerTable === 'date-table'"
            :class="iconBtnCls('next')"
            @click="nextMonth('left')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-right" /></span>
        </div>
        <component
          :is="leftPickerTable"
          ref="leftYearTable"
          v-if="currentView !== 'time'"
          :table-date="leftPanelDate"
          :start-date="startDate"
          selection-mode="range"
          :disabled-date="disabledDate"
          :range-state="rangeState"
          :show-week-numbers="showWeekNumbers"
          :value="preSelecting.left ? [dates[0]] : dates"
          @on-change-range="handleChangeRange"
          @on-pick="panelPickerHandlers.left"
          @on-pick-click="handlePickClick" />
      </div>
      <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime&&!onlyTimeRange">
        <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
          <span
            v-if="splitPanels || rightPickerTable !== 'date-table'"
            :class="iconBtnCls('prev', '-double')"
            @click="prevYear('right')"><Icon type="ios-arrow-left" /></span>
          <span
            v-if="splitPanels && rightPickerTable === 'date-table'"
            :class="iconBtnCls('prev')"
            @click="prevMonth('right')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-left" /></span>
          <date-panel-label
            :date-panel-label="rightDatePanelLabel"
            :current-view="rightDatePanelView"
            :date-prefix-cls="datePrefixCls" />
          <span
            :class="iconBtnCls('next', '-double')"
            @click="nextYear('right')"><Icon type="ios-arrow-right" /></span>
          <span
            v-if="rightPickerTable === 'date-table'"
            :class="iconBtnCls('next')"
            @click="nextMonth('right')"
            v-show="currentView === 'date'"><Icon type="ios-arrow-right" /></span>
        </div>
        <component
          :is="rightPickerTable"
          ref="rightYearTable"
          v-if="currentView !== 'time'"
          :table-date="rightPanelDate"
          selection-mode="range"
          :range-state="rangeState"
          :disabled-date="disabledDate"
          :show-week-numbers="showWeekNumbers"
          :value="preSelecting.right ? [dates[dates.length - 1]] : dates"
          @on-change-range="handleChangeRange"
          @on-pick="panelPickerHandlers.right"
          @on-pick-click="handlePickClick" />
      </div>
      <div :class="[prefixCls + '-content']" v-show="isTime">
        <time-picker
          ref="timePicker"
          v-if="currentView === 'time'"
          :value="dates"
          :format="format"
          :time-disabled="timeDisabled"
          v-bind="timePickerOptions"
          @on-pick="handleRangePick"
          @on-pick-click="handlePickClick"
          @on-pick-clear="handlePickClear"
          @on-pick-success="handlePickSuccess"
          @on-pick-toggle-time="handleToggleTime" />
      </div>
      <Confirm
        v-if="confirm"
        :show-time="showTime"
        :is-time="isTime"
        :time-disabled="timeDisabled"
        :clearable="clearable"
        @on-pick-toggle-time="handleToggleTime"
        @on-pick-clear="handlePickClear"
        @on-pick-success="handlePickSuccess" />
    </div>
  </div>
</template>
<style>
.aty-date-picker-with-range .aty-picker-panel-body{
    min-width: auto;
}
</style>

<script type="text/ecmascript-6"  src="./date-range.js"></script>
